<template>
  <div>
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" :form="form">
      <a-card title="商家信息" class="mb20">
        <div class="ant-card-content">
          <a-row>
            <a-col :span="12">
              <a-form-item label="商家名称">
                <a-input
                  v-decorator="[
                    'merchantName',
                    { rules: [{ required: true, message: '请输入商家名称' }] },
                  ]"
                  placeholder="自动填入"
                  disabled
                />
                <a-button type="primary" @click="selectMerchant"
                  >选择商家</a-button
                >
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="商家位置">
                <a-input
                  v-decorator="[
                    'road',
                    { rules: [{ required: false, message: '请输入商家位置' }] },
                  ]"
                  placeholder="自动填入"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="实际经营项目">
                <a-input
                  v-decorator="[
                    'actualBusinessItems',
                    { rules: [{ required: true, message: '请输入门牌号' }] },
                  ]"
                  placeholder="自动填入"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="经营者姓名">
                <a-input
                  v-decorator="[
                    'operatorName',
                    {
                      rules: [{ required: true, message: '请输入经营者姓名' }],
                    },
                  ]"
                  placeholder="自动填入"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="经营者联系方式">
                <a-input
                  v-decorator="[
                    'operatorContact',
                    {
                      rules: [
                        { required: false, message: '请输入经营者联系方式' },
                      ],
                    },
                  ]"
                  placeholder="自动填入"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-card>
      <a-card title="处罚事件" class="mb20">
        <div class="ant-card-content">
          <a-row>
            <a-col :span="12">
              <a-form-item label="违规事件">
                <a-input
                  v-decorator="[
                    'violationEventId',
                    { rules: [{ required: true, message: '违规事件' }] },
                  ]"
                  placeholder="违规事件"
                />
                <a-button type="primary" @click="selectEvent"
                  >选择事件</a-button
                >
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="违规行为">
                <a-select
                  style="width: 120px"
                  v-decorator="[
                    'violationType',
                    { rules: [{ required: true, message: '请选择违规行为' }] },
                  ]"
                  placeholder="请选择违规行为"
                >
                  <a-select-option
                    v-for="(item, index) in violationList"
                    :key="index"
                    :value="item.dictValue"
                  >
                    {{ item.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="处罚依据">
                <a-select
                  style="width: 120px"
                  v-decorator="[
                    'legalBasis',
                    { rules: [{ required: true, message: '请选择违规行为' }] },
                  ]"
                  placeholder="请选择违规行为"
                >
                  <a-select-option
                    v-for="(item, index) in penaltyList"
                    :key="index"
                    :value="item.dictValue"
                  >
                    {{ item.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="依据详情">
                <a-input
                  v-decorator="[
                    'basisDetails',
                    { rules: [{ required: true, message: '请输入依据详情' }] },
                  ]"
                  placeholder="请输入依据详情"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="处罚决定">
                <a-input
                  v-decorator="[
                    'penaltyDecision',
                    { rules: [{ required: true, message: '请输入处罚决定' }] },
                  ]"
                  placeholder="请输入处罚决定"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="处罚时间">
                <a-date-picker
                  show-time
                  valueFormat="YYYY-MM-DD HH:mm:ss"
                  placeholder="请输入处罚时间"
                  v-decorator="[
                    'penaltyTime',
                    { rules: [{ required: true, message: '请输入处罚时间' }] },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-card>
      <a-card title="相关工作信息" class="mb20">
        <div class="ant-card-content">
          <a-row>
            <a-col :span="12">
              <a-form-item label="处罚决定人">
                <a-input
                  v-decorator="[
                    'decisionMaker',
                    { rules: [{ required: true, message: '处罚决定人' }] },
                  ]"
                  placeholder="处罚决定人"
                />
              </a-form-item> </a-col
          ></a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="处罚决定人联系方式">
                <a-input
                  v-decorator="[
                    'decisionMakerContact',
                    {
                      rules: [
                        { required: true, message: '处罚决定人联系方式' },
                      ],
                    },
                  ]"
                  placeholder="处罚决定人联系方式"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="处罚执行人">
                <a-input
                  v-decorator="[
                    'executor',
                    { rules: [{ required: true, message: '处罚执行人' }] },
                  ]"
                  placeholder="处罚执行人"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="处罚执行人联系方式">
                <a-input
                  v-decorator="[
                    'executorContact',
                    {
                      rules: [
                        { required: true, message: '处罚执行人联系方式' },
                      ],
                    },
                  ]"
                  placeholder="处罚执行人联系方式"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div style="width: 100%; display: flex; justify-content: center">
          <div style="display: flex; gap: 20px">
            <a-button @click="cancel">取 消</a-button>
            <a-button type="primary" @click="save">保 存</a-button>
            <a-button type="primary" @click="dialogVisible = true"
              >发 送 通 知</a-button
            >
          </div>
        </div>
      </a-card>
    </a-form>
    <a-modal
      title="选择商家"
      :visible="mechantVisible"
      width="80%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="mechantVisible = false"
      @ok="putMechant"
    >
      <div class="flex-start mb10">
        <span style="white-space: nowrap;">商家名称：</span>
        <a-input placeholder="请输入" v-model="queryForm1.merchantName" style="width: 200px;" />
        <a-button type="primary" @click="handleSearch"> 查询 </a-button
        >&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </div>
      <a-table
        :scroll="{ x: 500 }"
        :columns="columns1"
        :data-source="tableData1"
        :pagination="false"
        :loading="loading1"
        style="height: 400px; overflow-y: auto"
        rowKey="id"
        :rowSelection="{
          type: 'radio',
          onChange: rowSelectedChange1,
        }"
      ></a-table>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <a-pagination
          @change="changePage1"
          :default-current="queryForm1.offset"
          :total="total1"
          :show-total="(total) => `共 ${total} 条`"
        />
      </div>
    </a-modal>
    <a-modal
      title="选择事件"
      :visible="eventVisible"
      width="80%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="eventVisible = false"
      @ok="putEvent"
    >
      <a-table
        :scroll="{ x: 500 }"
        :columns="columns2"
        :data-source="tableData2"
        :loading="loading2"
        :pagination="false"
        style="height: 400px; overflow-y: auto"
        rowKey="id"
        :rowSelection="{
          type: 'radio',
          onChange: rowSelectedChange2,
        }"
      ></a-table>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <a-pagination
          @change="changePage2"
          :default-current="queryForm2.offset"
          :total="total2"
          :show-total="(total) => `共 ${total} 条`"
        />
      </div>
    </a-modal>
    <a-modal
      title="确认发送通知短信吗"
      :visible="dialogVisible"
      width="38%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible = false"
      @ok="sendMsg"
    >
      <a-form :form="msgForm">
        <a-row>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="标题"
          >
            <a-input
              v-decorator="[
                'recipientName',
                { rules: [{ required: true, message: '请输入标题' }] },
              ]"
              placeholder="请输入标题"
            />
          </a-form-item>
        </a-row>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="正文"
        >
          <a-input
            v-decorator="[
              'smsContent',
              { rules: [{ required: true, message: '请输入正文' }] },
            ]"
            placeholder="请输入正文"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="跳转链接"
        >
          <a-input
            v-decorator="[
              'recipientContact',
              { rules: [{ required: true, message: '请输入跳转链接' }] },
            ]"
            placeholder="请输入跳转链接"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="时间"
        >
          <a-date-picker
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="年-月-日"
            v-decorator="[
              'scheduledTime',
              { rules: [{ required: true, message: '请输入时间' }] },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import Upload from "@/component/upload/index.vue";
import dayjs from "dayjs";
import dictMixin from "@/mixins/dictMixin";

import { message, Modal } from "ant-design-vue";
export default {
  components: {
    Upload,
  },
  mixins: [dictMixin],
  data() {
    return {
      dialogVisible: false,
      loading1: true,
      loading2: true,
      selectedInputItemValue1: [], // 当前选中的行
      selectedInputItemValue2: [], // 当前选中的行
      mechantVisible: false,
      queryForm1: { current: 10, offset: 1 },
      total1: 0,
      total2: 0,
      columns1: [
        {
          title: "", // 添加单选列
          dataIndex: "rowKey",
          key: "rowKey", // 自定义列的key，用于在模板中引用
          width: "50px",
        },
        {
          title: "商家ID",
          dataIndex: "merchantId",
          key: "merchantId",
        },
        {
          title: "商家名称",
          dataIndex: "merchantName",
          key: "merchantName",
        },
        {
          title: "商家状态",
          dataIndex: "merchantStatus",
          key: "merchantStatus",
          customRender: (text, record, index) => {
              let findOne = this.merchantStatusList.find((item) => item.value == text) || {}    
            return findOne && findOne.label || "";
          },
        },
        {
          title: "商家位置",
          dataIndex: "location",
          key: "location",
        },
        {
          title: "实际经营项目",
          dataIndex: "actualBusinessItems",
          key: "actualBusinessItems",
        },
        {
          title: "房东姓名",
          dataIndex: "landlordName",
          key: "landlordName",
        },
        {
          title: "房东联系方式",
          dataIndex: "landlordContact",
          key: "landlordContact",
        },
        {
          title: "承租人姓名",
          dataIndex: "tenantName",
          key: "tenantName",
        },
        {
          title: "承租人联系方式",
          dataIndex: "tenantContact",
          key: "tenantContact",
        },
        {
          title: "经营者姓名",
          dataIndex: "operatorName",
          key: "operatorName",
        },
        {
          title: "经营者联系方式",
          dataIndex: "operatorContact",
          key: "operatorContact",
        },
        {
          title: "创建人",
          dataIndex: "createdUserName",
          key: "createdUserName",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
      ],
      eventVisible: false,
      queryForm2: { current: 20, offset: 1 },
      tableData1: [],
      merchantStatusList: [
        {
          value: 0,
          label: "歇业",
        },
        {
          value: 1,
          label: "营业",  
        },
        {
          value: 2,
          label: "装修",
        },
      ],
      columns2: [
        {
          title: "", // 添加单选列
          dataIndex: "rowKey",
          key: "rowKey", // 自定义列的key，用于在模板中引用
          width: "50px",
        },
        {
          title: "事件ID",
          dataIndex: "eventId",
          key: "eventId",
        },
        { title: "事件编号", dataIndex: "eventId", key: "eventId" },
        {
          title: "问题来源",
          dataIndex: "issueSource",
          key: "issueSource",
          // customRender: (text, record, index) => {
          //   return (
          //     (this.issueSourceList.find((item) => item.value == text) || {})
          //       .label || ""
          //   );
          // },
        },
        {
          title: "问题类型",
          dataIndex: "issueType",
          key: "issueType",
        },
        {
          title: "紧急程度",
          dataIndex: "urgencyLevel",
          key: "urgencyLevel",
          customRender: (text, record, index) => {
            return (
              (this.urgencyLevelList.find((item) => item.value == text) || {})
                .label || ""
            );
          },
        },
        {
          title: "受理状态",
          dataIndex: "businessStatus",
          key: "businessStatus",
          customRender: (text, record, index) => {
            return (
              (this.businessStatusList.find((item) => item.value == text) || {})
                .label || ""
            );
          },
        },
        {
          title: "办理状态",
          dataIndex: "eventStatus",
          key: "eventStatus",
          customRender: (text, record, index) => {
            return (
              (this.dealStatusList.find((item) => item.value == text) || {})
                .label || ""
            );
          },
        },
        {
          title: "关联对象",
          dataIndex: "relatedObjectName",
          key: "relatedObjectName",
        },
        {
          title: "案件描述",
          dataIndex: "issueDescription",
          key: "issueDescription",
        },
        { title: "上报人姓名", dataIndex: "reporterName", key: "reporterName" },
        {
          title: "上报人电话",
          dataIndex: "reporterPhone",
          key: "reporterPhone",
        },
        { title: "上报时间", dataIndex: "reportTime", key: "reportTime" },
      ],
      tableData2: [],
      exteriorPhotoLink: "",
      interiorPhotoLink: "",
      penaltyList: [],
      violationList: [],
      BusinessTypeList: [],
      politicalList: [
        {
          value: "共青团员",
          label: "共青团员",
        },
        {
          value: "预备党员",
          label: "预备党员",
        },
        {
          value: "中共党员",
          label: "中共党员",
        },
      ],
      merchantItems: [
        {
          value: "住宿服务",
          label: "住宿服务",
          children: [],
        },
      ],
      form: this.$form.createForm(this, { name: "coordinated" }),
      msgForm: this.$form.createForm(this, { name: "coordinated" }),
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
      merchantId: "",
      penaltyInfoId: "",
      ModalType: "",
    };
  },
  mounted() {
    this.getDictData({
      code: "QUESTION_SOURCE_CODE", // 问题来源
      name: "issueSourceList",
    });
    this.getDictData({
      code: "QUESTION_TYPE_CODE", // 问题类型
      name: "issueTypeList",
    });
    this.getDictList();
    if (this.$route.query.penaltyInfoId) {
      this.getDetail(this.$route.query.penaltyInfoId);
      this.penaltyInfoId = this.$route.query.penaltyInfoId;
    }
  },
  methods: {
    getDictList() {
      this.$axios
        .get(
          "/government-platform-center/dictData/queryByCode?dictType=VIOLATION_BEHAVIOR"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.violationList = res.data.data;
          }
        });
      this.$axios
        .get(
          "/government-platform-center/dictData/queryByCode?dictType=PENALTY_BASIS"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.penaltyList = res.data.data;
          }
        });
    },
    handleSearch() {
      this.queryForm1.offset = 1;
      this.selectMerchant();
    },
    cleanQuery() {
      this.queryForm1.offset = 1;
      this.queryForm1.merchantName = "";
      this.getMerchantList();
    },
    // 获取商家
    getMerchantList() {
      this.loading1 = true;
      const url = `/government-platform-center/xunjian/merchantInfo/queryByPage`;
      this.$axios
        .post(url, this.queryForm1)
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData1 = res.data.data;
            this.total1 = res.data.total;
            this.loading1 = false;
          }
        })
        .finally(() => {
          this.loading1 = false;
        });
    },
    //商家操作
    selectMerchant() {
      this.mechantVisible = true;
      this.getMerchantList();
    },
    putMechant() {
      this.form.setFieldsValue({
        merchantId: this.selectedInputItemValue1.merchantId,
        merchantName: this.selectedInputItemValue1.merchantName,
        road: this.selectedInputItemValue1.road,
        actualBusinessItems: this.selectedInputItemValue1.actualBusinessItems,
        operatorName: this.selectedInputItemValue1.operatorName,
        operatorContact: this.selectedInputItemValue1.operatorContact,
      });
      this.merchantId = this.selectedInputItemValue1.merchantId;
      this.mechantVisible = false;
    },
    rowSelectedChange1(e) {
      this.selectedInputItemValue1 = this.tableData1[e[0]];
    },
    changePage1(e) {
      this.queryForm1.offset = e;
      this.selectMerchant();
    },
    //实践操作
    putEvent() {
      this.form.setFieldsValue({
        violationEventId: this.selectedInputItemValue2.eventId,
      });
      this.eventVisible = false;
    },
    selectEvent() {
      this.eventVisible = true;
      this.loading2 = true;
      const url = `/government-platform-center/case/getMyUploadCase`;
      this.$axios
        .post(url, this.queryForm2)
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData2 = res.data.data;
            this.total2 = res.data.total;
          }
        })
        .finally(() => {
          this.loading2 = false;
        });
    },
    rowSelectedChange2(_, row) {
      this.selectedInputItemValue2 = row[0];
    },
    changePage2(e) {
      this.queryForm2.offset = e;
      this.selectEvent();
    },
    changeDept(e) {
      console.log(e);
    },
    getImgW(e) {
      this.exteriorPhotoLink = e;
    },
    getImgN(e) {
      this.interiorPhotoLink = e;
    },
    cancel() {
      this.$router.push({
        path: "/xuncha/sjgl/cfxx",
      });
    },
    save() {
      this.form.validateFields((err, values) => {
        console.log(values, "values");
        if (err) {
          return;
        }
        if (!this.penaltyInfoId) {
          const url = "/government-platform-center/xunjian/penaltyInfo/add";
          var form = { ...values, merchantId: this.merchantId };
          this.$axios.post(url, form).then((res) => {
            if (res.data.code == 0) {
              message.success("新增成功");
              this.$router.push({
                path: "/xuncha/sjgl/cfxx",
              });
            }
          });
        } else {
          const url = "/government-platform-center/xunjian/penaltyInfo/edit";
          var form = { ...values, penaltyInfoId: this.penaltyInfoId };
          this.$axios.post(url, form).then((res) => {
            if (res.data.code == 0) {
              message.success("修改成功");
              this.$router.push({
                path: "/xuncha/sjgl/cfxx",
              });
            }
          });
        }
      });
    },
    getDetail(id) {
      const url = `/government-platform-center/xunjian/penaltyInfo/detail?penaltyInfoId=${id}`;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 0) {
          let data = {
            ...res.data.data,
            violationType: String(res.data.data.violationType),
            legalBasis: String(res.data.data.legalBasis),
          };
          this.form.setFieldsValue(data);
          this.getMerchantDetail(res.data.data.merchantId);
        }
      });
    },
    getMerchantDetail(id) {
      const url = `/government-platform-center/xunjian/merchantInfo/detail?merchantId=${id}`;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 0) {
          this.form.setFieldsValue({
            merchantName: res.data.data.merchantName,
            road: res.data.data.road,
            actualBusinessItems: res.data.data.actualBusinessItems,
            operatorName: res.data.data.operatorName,
            operatorContact: res.data.data.operatorContact,
          });
        }
      });
    },
    sendMsg() {
      this.msgForm.validateFields((err, values) => {
        if (err) {
          return;
        }
        const url = "/government-platform-center/xunjian/penaltyInfo/verify";
        var form = { ...values, penaltyInfoId: this.penaltyInfoId };
        this.$axios.post(url, form).then((res) => {
          if (res.data.code == 0) {
            message.success("新增成功");
            this.$router.push({
              path: "/xuncha/sjgl/sjxx",
            });
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.ant-card-content {
  padding-left: 200px;
}
:v-deep {
  .ant-form-item-label {
    width: 150px !important;
  }
  .ant-form-inline .ant-form-item > .ant-form-item-label {
    width: 150px !important;
  }
}
</style>
